import Taro, { Component } from '@tarojs/taro'
import { AtButton, AtSearchBar } from 'taro-ui'
import { View, Text } from '@tarojs/components'
import { DNavBar, DMap, DItemError } from '@/components'
import classNames from 'classnames'
import './selectmap.scss'

export default class SelectMap extends Component {

  constructor(props) {
    super(props)
    this.state = {
      title: "",
      list: []
    }
  }

  componentWillMount() {
    let { type = 1 } = this.$router.params
    this.setState({
      title: this.getTitle(type)
    })
  }

  selectmapHanlde(i) {
    let { list } = this.state

    list.map((item, k) => {
      item.status = false
      if (i === k) {
        item.status = true
      }
    })
    Taro.showLoading({
      title: '已选择当前位置',
      mask: true
    })
    this.setState({
      list
    }, () => {
      setTimeout(() => {
        this.onSubmit()
      }, 800)
    })
  }

  onserachHandle(value) {
    if (value.length === 0) {
      return
    }
    let { list } = this.state
    list = []
    value.map((item, i) => {
      list.push({
        title: item.title,
        distance: item.distance || '100m内',
        desc: item.desc,
        region: item.region,
        point: item.point,
        status: false  //i === 0 ? true : false
      })
    })

    this.setState({
      list
    })
  }

  onSubmit() {
    let { list } = this.state
    let _addreinfo = {}
    list.map(item => {
      if (item.status) {
        _addreinfo = {
          title: item.title, // + item.desc + item.distance
          desc: item.desc,
          region: item.region,
          point: item.point,
          distance: item.distance
        }
      }
    })

    sessionStorage.setItem('_addreinfo', JSON.stringify(_addreinfo))
    Taro.navigateBack({
      delta: 1
    }).then(() => {
      Taro.hideLoading()
    })
  }

  getTitle(type) {
    return {
      $1: '始发地址',
      $2: '目的地址'
    }[`$${type}`]
  }

  render() {
    const {
      title,
      list
    } = this.state
    return (
      <View className='b_selectmapbox'>
        <DNavBar title={title}></DNavBar>
        {/* <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>完成</AtButton> */}
        <View className='b_selectmapbox__box'>
          <View className='b_selectmapbox__content'>
            <DMap serachHandle={this.onserachHandle.bind(this)}></DMap>
          </View>
          <View className='b_selectmapbox__list'>
            {
              list.length > 0 && <View className='b_selectmapbox__list-info'>
                {
                  list && list.length > 0 && list.map((item, i) => {
                    return <View className={classNames('b_selectmapbox__list_item', i === 0 ? 'b_selectmapbox__list_active' : '')} onClick={this.selectmapHanlde.bind(this, i)}>
                      <View className='b_selectmapbox__list_item-title'>{item.title}</View>
                      <View className='b_selectmapbox__list_item-desc'>{item.distance}<Text className='b_selectmapbox__list_item-padding'>|</Text> {item.desc}</View>
                    </View>
                  })
                }
              </View>
            }

            {
              list.length === 0 && <DItemError type={5}></DItemError>
            }
          </View>
        </View>
      </View>
    )
  }

}
